<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="js/json2.js"></script>
	<script type="text/javascript" src="js/dialog.pc.js"></script>
	
	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="css/cpCommon.css" type="text/css" media="screen"/>
	<link rel="stylesheet" href="css/dialog.pc.css" type="text/css" media="screen"/>
	
	<style type="text/css">	
		.topBody {
			border-bottom: 1px solid #cac2c2;
			background-color: white;
		}
		
		.topBody>.userName {
			float: right;
			height: 36px;
			margin-right: 20px;
			line-height: 36px;
			color: black;
		}
		
		.topBody>.signOut {
			float: right;
			margin-left: 20px;
			background-color: cornflowerblue;
			color: white;
			width: 80px;
			text-align: center;
			font-size: 16px;
			border-radius: 1px;
			height: 36px;
			line-height: 36px;
			cursor: pointer;
		}
		
		.middleBody {
			width: 80%;
			min-width: 800px;
			margin: 30px auto;
			border: 1px solid #cac2c2;
			background-color: white;
		}
		
		.middleBody>.topRow {

		}
		
		.middleBody>.topRow>.title {
			height: 36px;
			line-height: 36px;
			margin-left: 10px;			
		}
		
		.middleBody>.searchArea {
			border-bottom: 1px solid #cac2c2;
		}
		
		.middleBody>.searchArea>.iptSearch {
			float: left;
			width: 200px;
			height: 30px;
			line-height: 30px;
			margin-left: 10px;
			margin-bottom: 10px;
		}
		
		.middleBody>.searchArea>.searchBtn {
			float: left;
			height: 36px;
			line-height: 36px;
			background-color: cornflowerblue;
			color: white;
			width: 80px;
			text-align: center;
			margin-bottom: 10px;
			margin-left: 10px;
			border-radius: 1px;
			cursor: pointer;
		}
		
		.middleBody>.searchArea>.addBtn {
			float: right;
			height: 36px;
			line-height: 36px;
			background-color: cornflowerblue;
			color: white;
			width: 80px;
			text-align: center;
			margin-bottom: 10px;
			margin-right: 10px;
			border-radius: 1px;
			cursor: pointer;
		}
		
		.middleBody>.result {
			
		}
		
		.middleBody>.result>.resultTitle {
			padding-left: 10px;
			padding-right: 10px;
			background-color: aliceblue;
		}
		
		.middleBody>.result>.resultTitle>.rTitle {
			font-size: 14px;
			float: left;
			color: #211f24;
			line-height: 30px;
			text-align: center;
			width: 110px;
		}
		
		.middleBody>.result>.resultTitle>.sysNameTitle {

		}
		
		.middleBody>.result>.resultTitle>.sysAccountTitle {

		}
		
		.middleBody>.result>.resultTitle>.sysPasswordTitle {
			width: 130px;
		}
		
		.middleBody>.result>.resultTitle>.updateTimeTitle {

		}
		
		.middleBody>.result>.resultTitle>.promptTitle {
			width: 130px;
		}
		.middleBody>.result>.resultTitle>.optionTitle {
			float: right;
			width: 180px;
		}
		
		.middleBody>.result>.resultValues {
			height: 700px;
		}
		
		.middleBody>.result>.resultValues>.resultValue {
			padding-left: 10px;
			padding-right: 10px;
		}
		
		
		.middleBody>.result>.resultValues>.resultValue:nth-child(odd),
		.middleBody>.result>.resultValues>.resultValue:nth-child(odd)>.rValue {
			background-color: aliceblue;
		}

		.middleBody>.result>.resultValues>.resultValue>.rValue {
			float: left;
			font-size: 14px;
			color: #211f24;
			line-height: 30px;
			text-align: center;
			border: none;
			background-color: white;
			width: 110px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.middleBody>.result>.resultValues>.resultValue>.sysName {
			
		}
		
		.middleBody>.result>.resultValues>.resultValue>.sysAccount {
			
		}
		
		.middleBody>.result>.resultValues>.resultValue>.sysPassword {
			width: 130px;
		}
		.middleBody>.result>.resultValues>.resultValue>.updateTime {
			height: 32px;
		}
		.middleBody>.result>.resultValues>.resultValue>.prompt {
			width: 140px;
		}
		
		.middleBody>.result>.resultValues>.resultValue>.btn {
			float: right;
			width: 50px;
			height: 32px;
			padding-right: 10px;
			cursor: pointer;
			color: blue;
		}
		.middleBody>.result>.resultValues>.resultValue>.del {
			color: currentColor;
		}
		.middleBody>.result>.resultValues>.resultValue>.save {
			
		}
		.middleBody>.result>.resultValues>.resultValue>.edit {
			
		}
		
		.middleBody>.result>.resultValues>.resultValue>.see {
			
		}
		
		.middleBody>.result>.optionPage {
			
		}
		
		.middleBody>.result>.optionPage>.lastPage {
			float: right;
		}
		
		.middleBody>.result>.optionPage>.inputPage {
			float: right;
		}
		
		.middleBody>.result>.optionPage>.nextPage {
			float: right;
		}
		
		.middleBody>.result>.optionPage>.jumpPage {
			float: right;
		}

	</style>
<title>账号信息</title>
</head>
<body>
	<div class="topBody">
		<div class="signOut" id="signOut">退出</div>
		<div class="userName">${account}</div>
		<div class="clear"></div>
	</div>
	<div class="middleBody">
		<div class="topRow">
			<div class="title">信息列表</div>
		</div>
		<div class="searchArea">
			<input class="iptSearch" id="iptSearch"/>
			<div class="searchBtn" id="searchRecord">搜索</div>
			<div class="addBtn" id="addRecord">添加</div>
			<div class="clear"></div>
		</div>
		<div class="result">
			<div class="resultTitle">
				<div class="rTitle sysNameTitle">系统名称</div>
				<div class="rTitle sysAccountTitle">用户名</div>
				<div class="rTitle sysPasswordTitle">密码</div>
				<div class="rTitle updateTimeTitle">更新时间</div>
				<div class="rTitle promptTitle">备注</div>
				<div class="rTitle optionTitle">操作</div>
				<div class="clear"></div>
			</div>
			<div class="resultValues" id="resultValues"></div>
			<div class="optionPage hidden">
				<div class="jumpPage">跳转</div>
				<div class="nextPage"></div>
				<input class="inputPage"/>
				<div class="lastPage"></div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">			
		function clickEvent() {
			$('#signOut').click(signOut);
			$('#searchRecord').click(searchRecord);
			
			$('#addRecord').click(function() {
				showAddView();
				$('#addRecord').addClass('hidden');
			});
		}
		
		function signOut() {
			var act = function() {							
				$.post('cpCommon/logout', {}, function(result) {
					if (result)
						window.location='cp0000'; 
				}, 'json');
			};
			
			$('#signOut').click(act);
		}
		
		function searchRecord() {
			$.post('cp0001/searchRecord', {
				sysNameKey: $('#iptSearch').val()
			}, showView, 'json');
		}
		
		function loadData() {
			$.post('cp0001/loadData', {
				account: '${account}'
			}, showView, 'json');
		}
		
		function showView(result) {
			
			function genView(row) {
				var html = [];
				
				html.push('<div class="resultValue">');
				html.push('		<input class="rValue sysName" readonly="true" value="' + (row.sysName || '') + '"/>');
				html.push('		<input class="rValue sysAccount" readonly="true" value="' + (row.sysAccount || '') + '"/>');
				html.push('		<input class="rValue sysPassword" readonly="true" onmouseover="this.title=this.value" value="' + (row.sysPassword || '') + '"/>');
				html.push('		<div class="rValue updateTime">' + (row.updateTime || '') + '</div>');
				html.push('		<input class="rValue prompt" readonly="true" value="' + (row.prompt || '') + '"/>');
				html.push('		<div class="rValue btn del">删除</div>');
				html.push('		<div class="rValue btn save hidden">保存</div>');
				html.push('		<div class="rValue btn edit">修改</div>');
				html.push('		<div class="rValue btn see">查看</div>');
				html.push('		<div class="clear"></div>');
				html.push('</div>');
				
				var div = $(html.join('\r\n'));
				
				div.find('.btn.del').click(function() { delOneResult(div, row.id); });
				div.find('.btn.save').click(function() { update(div, row.id); });
				div.find('.btn.edit').click(function() { editOneResult(div, row.id); });
				div.find('.btn.see').click(function() { seePassword(div, row.id); });
				
				return div;				
			}
			
			var container = $('#resultValues');
			container.empty();
			for(var i=0; i<result.length; i++) {
				var pDiv = genView(result[i]);
				container.append(pDiv);
			}
			
			var clearDiv = $('<div class="clear"></div>');
			container.append(clearDiv);
		}
		
		function showAddView() {
			
			function genView() {
				var html = [];
				
				html.push('	<div class="resultValue addValue" id="addValue">');
				html.push('		<input class="rValue sysName" placeholder="系统名称"/>');
				html.push('		<input class="rValue sysAccount" placeholder="账号"/>');
				html.push('		<input class="rValue sysPassword" placeholder="密码"/>');
				html.push('		<div class="rValue updateTime">####</div>');
				html.push('		<input class="rValue prompt" placeholder="提示信息"/>');
				html.push('		<div class="rValue btn del">删除</div>');
				html.push('		<div class="rValue btn save">保存</div>');
				html.push('		<div class="clear"></div>');
				html.push('	</div>');
				
				var div = $(html.join('\r\n'));
				
				div.find('.btn.del').click(function() { delAddRecord(div); });
				div.find('.btn.save').click(function() { save(div); });
				
				return div;				
			}
			
			var container = $('#resultValues');
			var pDiv = genView();
			container.append(pDiv);
			
			var clearDiv = $('<div class="clear"></div>');
			container.append(clearDiv);
		}
		
		function validate(data) {
			var toHint = [];
			for (var k in data) {
				var item = data[k];
				var value = item.value;
				var hint = item.hint;
				
				if (!value)
					toHint.push(hint);
			}
			
			if (toHint.length == 0)
				return true;
			
			var message = toHint.join('、') + '不能为空';
			$.zjb_dialog.alert('注意', message);
			return false;
		}
		
		function update(div, id) {			
			var sysName = $(div).find('.sysName').val();
			var sysAccount = $(div).find('.sysAccount').val();
			var sysPassword = $(div).find('.sysPassword').val();
			var prompt = $(div).find('.prompt').val();
			
			var toCheck = {
				sysName: { hint: '系统名', value: sysName },
				sysAccount: { hint: '用户名', value: sysAccount },
				sysPassword: { hint: '密码', value: sysPassword }
			};
			if (!validate(toCheck))
				return;
			
			$.post('cp0001/update', {
				id: id,
				sysName: sysName,
				sysAccount: sysAccount,
				sysPassword: sysPassword,
				prompt: prompt
			}, function(result) {
				if (!result) {
					$.zjb_dialog.alert('注意', '修改失败！');
					return;
				}
				
				loadData();
				$(div).find('.btn.save').addClass('hidden');
				$('.resultValue>.edit').removeClass('hidden'); // 打开所有修改按钮
				$('#addRecord').removeClass('hidden');
			}, 'json');
		}
		
		function save(div) {
			var sysName = $(div).find('.sysName').val();
			var sysAccount = $(div).find('.sysAccount').val();
			var sysPassword = $(div).find('.sysPassword').val();
			var prompt = $(div).find('.prompt').val();
			
			var toCheck = {
				sysName: { hint: '系统名', value: sysName },
				sysAccount: { hint: '用户名', value: sysAccount },
				sysPassword: { hint: '密码', value: sysPassword }
			};
			if (!validate(toCheck))
				return;
			
			$.post('cp0001/save', {
				sysName: sysName,
				sysAccount: sysAccount,
				sysPassword: sysPassword,
				prompt: prompt
			}, function(result) {
				if (!result) {
					$.zjb_dialog.alert('注意', '添加失败！');
					return;
				}
				
				loadData();
				$('#addRecord').removeClass('hidden');
			}, 'json');
		}
		
		function delOneResult(div, id) {
			$.post('cp0001/delete', {
				id: id
			}, function(result) {
				if (!result) {
					$.zjb_dialog.alert('注意', '删除失败！');
					return;
				}
				
				loadData();
			}, 'json');
		}
		
		function delAddRecord(div) {
			$('#addValue').remove();
			$('#addRecord').removeClass('hidden');
		}
		
		function editOneResult(div, id) {
			$('.resultValue>.edit').addClass('hidden');//隐藏所有的修改按钮
			$(div).find('.save').removeClass('hidden');
			$(div).find('.sysName').removeAttr('readonly');
			$(div).find('.sysAccount').removeAttr('readonly');
			$(div).find('.sysPassword').removeAttr('readonly');
			seePassword(div, id);
			$(div).find('.prompt').removeAttr('readonly');
		}
		
		function seePassword(div, id) {
			$.post('cp0001/seePassword', {
				id: id
			}, function(result) {
				$(div).find('.sysPassword').val(result.result);
			}, 'json');
		}
		
		function pageLoad() {
			clickEvent();
			loadData();
			signOut();
		}
		
		$(document).ready(pageLoad);
	</script>
</body>
</html>